<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style type="text/css">
			.mui-bar-nav~.mui-content {
				padding-bottom: 40px;
			}
			
			.nopacket {
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				font-size: 14px;
				color: #999;
				text-align: center;
				display: none;
				z-index: 1000;
			}
			
			.nopacket button {
				width: 120px;
				margin-top: 60px;
				background: #d52736;
				border-radius: 50px;
			}
			/*红包样式*/
			
			.packet_data {
				padding: 0 14px;
			}
			
			.packet_list {
				width: 100%;
				background: url(../../images/packet.png)no-repeat;
				background-size: 100% 100%;
				color: #fff;
				min-height: 80px;
				height: calc(100vw/4);
				max-height: 100px;
				margin-top: 20px;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.packet_list_cls {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.packet_list_cls>div {
				width: 10px;
				width: 20px;
				margin: 0 auto;
				line-height: 16px;
			}
			
			.packet_list_data {
				-webkit-flex: 5;
				flex: 5;
				-webkit-box-flex: 5;
				-moz-box-flex: 5;
				-ms-flex: 5;
				padding-left: 4%;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				align-items: center;
			}
			
			.packet_list_money {
				font-size: 18px;
			}
			
			.packet_list_money>span {
				font-size: 30px;
			}
			
			.packet_list_text {
				padding: 0 10px;
			}
			
			.packet_list_text>div {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			
			.mui-pull-caption {
				font-weight: normal;
				font-size: 12px;
			}
			/*兑现*/
			
			.gocoupon {
				position: fixed;
				bottom: 0;
				width: 100%;
				z-index: 1000;
			}
			
			.gocoupon>button {
				width: 100%;
				height: 44px;
				line-height: 44px;
				padding: 0;
				border-radius: 0;
				background: #bd212e;
			}
		</style>
	</head>

	<body>
		<div id="packet" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">我的红包</h1>
			</header>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">

					<div class="packet_data">
						<div class="packet_list" v-for="list in list">
							<div class="packet_list_cls">
								<div>通用券</div>
							</div>
							<div class="packet_list_data">
								<div class="packet_list_money">￥<span>{{list.offPrice}}</span></div>
								<div class="packet_list_text">
									<div>{{list.couponName}}【{{list.couponType=='common'?'全平台':list.siteName}}】</div>
									<div>有效期：{{list.endDateStr}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="gocoupon" v-show="list.length>0">
				<button type="button" class="mui-btn mui-btn-danger" @tap='clsOpen'>去兑现红包</button>
			</div>
			<div class="nopacket">
				<div>没有红包</div>
				<div><button type="button" class="mui-btn mui-btn-danger" @tap='clsOpen'>去兑现红包</button></div>
			</div>

		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			})

			var coupon = new Vue({
				el: '#packet',
				data: {
					imgCommonUrl: common.imageUrl,
					pageNum: 1,
					check: 0,
					list: []
				},
				methods: {
					checkTap: function(index) {
						if(this.check == index) {
							return
						}
						this.check = index
						mui('#pullrefresh').pullRefresh().refresh(true);
						coupon.list = []
						coupon.pageNum = 1
						mui('#pullrefresh').pullRefresh().pullupLoading();
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
					},
					clsOpen: function() {
						common.open('cashPacket.html', 'cashPacket.html')
					}
				}
			})

			function pullupRefresh() {
				common.ajax('/coupon/getList', {
					curPageNO: coupon.pageNum++,
					couPro: 'platform'
				}, function(data) {
					if(data.code == 1) {
						console.log(data.data)
						if(coupon.pageNum > data.data.pageCount) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						}
						coupon.list = coupon.list.concat(data.data.list)
						if(coupon.list.length <= 0) {
							$(".nopacket").show()
							$('.mui-pull-bottom-pocket').css('display', 'none !important')
						} else {
							$('.mui-pull-bottom-pocket').css('display', 'block !important')
							$(".nopacket").hide()
						}
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						if(data.resultMsg) {
							mui.toast(data.resultMsg)
						}
					}
				}, true, 'get')
			}
			document.addEventListener('reloads', function() {
				mui('#pullrefresh').pullRefresh().refresh(true);
				coupon.list = []
				coupon.pageNum = 1
				mui('#pullrefresh').pullRefresh().pullupLoading();
				mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
			})
		</script>
	</body>

</html>